// 统计空间
<template>
  <div>
    <div class="headdata">
      <div class="item" v-for="item in 4" :key="item">
        <div class="title">总充值</div>
        <div class="money">4289.23</div>
        <el-progress :percentage="50"></el-progress>
        <el-progress :percentage="20" :color="'#f56c6c'"></el-progress>
        <el-progress :percentage="30" :color="'#E6A23c'"></el-progress>
      </div>
    </div>
      <div class="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.echarsitem1();
  },
  methods: {
    echarsitem1() {
      var chartDom = document.querySelector(".main");
      var myChart = echarts.init(chartDom);
   let  option = {
     title:{
       text:"预约统计",
       left:'center',
     },
  legend: {
    top:'bottom',
    
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
};
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin-top: 10px;
  width: 100%;
  height: 680px;
  background-color:white;
}
.item {
  flex: 1;
  border: 1px solid #ddd;
  color: #333333;
  padding: 20px;
  min-width: 200px !important;
  box-sizing: border-box;
}
.money {
  margin: 10px 0;
  font-size: 20px;
  font-weight: 600;
  &::after {
    content: "万";
    font-size: 12px;
  }
}
.headdata {
  width: 100%;
  display: flex;
  justify-content: space-around;
  & > div {
    width: 25%;
    height: 150px;
    background-color: #fff;
  }
}
</style>